<template>
	<view class="">
		<u-navbar :is-back="true" title="学员管理" back-icon-color="#ffffff" title-color="#ffffff"
			:background="{backgroundColor:'#E62131'}"></u-navbar>
		<view class="atopheig">
			<view class="topchenlistd" :style="'top:'+height+'px;'">
				<div style="width: 90%;">
					<u-search placeholder="学员姓名/电话" v-model="parms.keyword" :clearabled="true" :show-action="false"
						input-align="center" @change="sherchs"></u-search>
				</div>
				<u-icon name="list-dot" color="#E62131" size="32" @click="modalClick"></u-icon>
			</view>
		</view>
		

		<view class="lsitreat" v-for="(item,index) in tabList" :key="index" >
			<view class="toptitle fliexs space_between">
				<span class="names">{{item.name}} <span class="cardtitle">其他</span> <span class="cardtitle">正式</span></span>
				<u-icon name="trash-fill" size="28" @click="deletestudentinfoApi(item.id)"></u-icon>
			</view>
			<view class="list_btns colors" @click="listAdtops(item)">
				<div class="lisntcenter fliexs">
					<u-icon name="calendar" size="28"></u-icon> <span style="padding-left: 10rpx;">{{item.campusName}}</span>
				</div>
				<div class="lisntcenter fliexs">
					<u-icon name="file-text" size="28"></u-icon> <span style="padding-left: 10rpx;">班课 <span style="color: #E62131;">{{item.classNum}}</span></span>
				</div>
				<div class="lisntcenter fliexs" v-if="item.lastTime">
					<u-icon name="order" size="28"></u-icon> <span style="padding-left: 10rpx;">最后上课时间{{item.lastTime}}</span>
				</div>
			</view>
		</view>
		<!-- <img class="addings" src="../../static/images/addimg.png" alt="" @click="studentAddClick"> -->


		<u-popup v-model="show" mode="right" z-index="99" :safe-area-inset-bottom="true" width="80%">
			<view class="centers">
				<view class="formsa">
					<view class="" style="padding: 0 10rpx;">
						<u-form :model="form" ref="uForm" label-width="150rpx">
							<u-form-item label="上课日期">
								<span @click="isckickTime(3)">{{form.csTime}}</span> <span
									style="padding: 0 40rpx;">至</span> <span
									@click="isckickTime(4)">{{form.ceTime}}</span>
							</u-form-item>
							<u-form-item label="课程名称"><u-input v-model="form.courseName" /></u-form-item>
							
							<u-form-item label="选择校区">
								<u-input v-model="form.texts" type="select" :border="false" @click="seltishow = true" />
										
							</u-form-item>
							
						</u-form>
					</view>
					<view class="btnlst fliexs space_between">
						<view class="btn_left center" @click="clichs">
							清空
						</view>
						<view class="btn_left right" @click="oklistTlist">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="time" v-model="showdate" :params="dateparams" @confirm="confirmdate"
			confirm-color="#E62131"></u-picker>
		<u-action-sheet :list="soltList" v-model="seltishow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				show: false,
				showdate: false,
				seltishow: false,
				dateparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form: {
					csTime: '请选择',
					ceTime: '请选择',
					courseName: '',
					texts: "",
				},
				dateindex: 1,
				height: 0,
				
				parms: {
					openStartTime: null,
					 openEndTime: null,
					keyword: '',
					limit: 10,
					courseName: "", 
					page: 1,
					campusId: '',
				},
				
				soltList: [],
				tabList:[],
			}
		},
		
		onLoad() {
			this.listNotPageApi()
		},
		onReady() {
			uni.getSystemInfo({
				success: (e) => {
					// this.compareVersion(e.SDKVersion, '2.5.0')
					let statusBar = 0
					let customBar = 0


					// #ifdef MP
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						customBar = e.statusBarHeight + 50
					}
					// #endif


					// #ifdef MP-WEIXIN
					statusBar = e.statusBarHeight
					// @ts-ignore
					const custom = wx.getMenuButtonBoundingClientRect()
					customBar = custom.bottom + custom.top - e.statusBarHeight
					// #endif


					// #ifdef MP-ALIPAY
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + e.titleBarHeight
					// #endif


					// #ifdef APP-PLUS
					console.log('app-plus', e)
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					// #endif


					// #ifdef H5
					statusBar = 0
					customBar = e.statusBarHeight + 45
					// #endif

					// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
					console.log(statusBar, customBar, e)
					this.height = customBar;
				}
			})
		},
		onShow() {
			this.sherList()
		},
		onReachBottom() {
			this.parms.page += 1
			this.studentinfolistappApi()
		},
		methods: {
			actionSheetCallback(index){
				this.parms.campusId =  this.soltList[index].id
				this.form.texts = this.soltList[index].name
			},
			// 获取校区
			listNotPageApi(){
				uni.$api.common.listNotPage().then((res) => {
				res.result.forEach((item)=>{
					item.text =  item.name
				})
					this.soltList = res.result
				});
			},
			// 删除
			deletestudentinfoApi(id){
				uni.$api.common.deletestudentinfo(id).then((res) => {
					uni.showToast({
						title: res.msg,
						icon:'none',
						duration: 2000
					});
					this.sherList()
				});
			},
			// 列表
			sherList(){
				this.parms.page = 1;
				this.tabList = [];
				this.studentinfolistappApi();
			},
			studentinfolistappApi(){
				uni.$api.common.studentinfolistapp(this.parms).then((res) => {
					if(res.count === this.tabList.length){
						uni.showToast({
							title: '没有更多了',
							icon:'none',
							duration: 2000
						});
					}else{
						res.result.forEach((item)=>{
							this.tabList.push(item)
						})
					}
					
				});
			},
			// 去详情
			listAdtops(item){
				uni.navigateTo({
					url: "./studentDetail?id=" + item.id
				})
			},
			studentAddClick(item){
				uni.navigateTo({
					url: "./studentAdd"
				})
			},
			isckickTime(index) {
				this.dateindex = index
				this.showdate = true;
			},
			// 确认时间
			confirmdate(e) {
				if (this.dateindex == 3) {
					this.form.csTime = e.year + '-' + e.month + '-' + e.day
					this.parms.openStartTime = e.year + '-' + e.month + '-' + e.day
				}
				if (this.dateindex == 4) {
					this.form.ceTime = e.year + '-' + e.month + '-' + e.day
					this.parms.openEndTime = e.year + '-' + e.month + '-' + e.day
				}
			},
			// 搜索
			sherchs() {
				this.sherList()
			},
			modalClick() {
				this.show = true;
			},
			// 清空
			clichs() {
				this.form = {
					courseName: '',
					csTime: '请选择',
					ceTime: '请选择',
					texts: "",
				};
				this.parms.openStartTime = null
				this.parms.openEndTime = null;
				this.parms.courseName = null;
				this.parms.campusId = "";
			},
			// 确定
			oklistTlist() {
				this.tablist = [];
				this.parms.courseName = this.form.courseName
				this.show = false
				this.sherList()
				this.clichs()
			},
		}
	}
</script>

<style lang="scss">
	.atopheig {
		width: 100%;
		height: 92rpx;
		position: relative;
	}

	.topchenlistd {
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #ffffff;
		z-index: 22;
		padding: 30rpx 30rpx 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.centers {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		.formsa {
			width: 100%;
			height: 75%;
		}
	}

	.btnlst {
		margin-top: 350rpx;

		.btn_left {
			width: 49%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #b1b1b1;
			border: 1rpx solid #e1e1e1;
		}

		.right {
			background-color: #E62131;
			color: #ffffff;
		}
	}

	.alltext {
		padding: 15rpx 30rpx;
	}

	.colors {
		color: #606266;
	}

	.lsitreat {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f2f2f2;

		.toptitle {
			.names {
				font-weight: bold;

				.cardtitle {
					display: inline-block;
					padding: 2rpx 6rpx;
					// background-color: #f2f2f2;
					border: 1rpx solid #E62131;
					border-radius: 5rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					color: #E62131;
				}
			}
		}

		.tiext_center {
			width: 100%;
			margin: 10rpx 0;
			white-space: nowrap; //不换行
			overflow: hidden; //超出部分隐藏
			text-overflow: ellipsis; //文本溢出显示省略号
		}
		.lisntcenter{
			margin-top: 10rpx;
		}
	}

	.addings {
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		right: 30rpx;
		bottom: 250rpx;
	}
</style>